<template>
  <div class="main">
    <div class="complaint-box">
      <div>
        <div class="complaint-content">
          <div class="complaint-text">
            <p class="text-content">
              您的投诉将在24小时内受理，请尽量提交详细的投诉说明
            </p>
          </div>
          <div class="complaint-text">
            <p>我要投诉的是“<span class="user-name">@肥苏</span>”发的微博：</p>
          </div>
          <div class="complaint-user">
            <div class="user-box">
              <div class="user-data-avatar">
                <img src="" alt="" />
              </div>
              <div class="article-text">
                <p>
                  <span class="user-name">@肥苏</span
                  >：《我们这10年》中，杨烁饰演一个村霸，开120万的路虎，住500万的别墅，戴50万的大金...
                </p>
              </div>
            </div>
          </div>
          <!-- 投诉分类 -->
            <h4>请选择你想要投诉的类型</h4>
            <div class="complaint-list">
              <ul>
                <li v-for="(items) in complainList" :key="items.id">
                  <span @click="showcheck(0)">{{ items.name }}</span>
                </li>
                <!-- <li><span>有害信息</span></li>
                                <li><span>网络暴力</span></li>
                                <li><span>人身攻击</span></li>
                                <li><span>违法信息</span></li>
                                <li><span>不实信息</span></li>
                                <li><span>违规营销</span></li>
                                <li><span>侵犯个人权益</span></li>
                                <li><span>不良价值导向</span></li> -->
              </ul>
            </div>
            <!-- 类型提示 -->
            <div class="prompt">
              <!-- 网络暴力的提示 -->
              <p class="prompt-text">
                出现多条粗俗冒犯、恶意诋毁、侵犯隐私、煽动情绪等内容
              </p>
              <!-- 人身攻击的提示 -->
              <p class="prompt-text">本投诉不属于侵权有效通知</p>
              <!-- 不实信息的提示 -->
              <p class="prompt-text">造成一定社会影响和关注的社会性虚假信息</p>
            </div>
            <!-- 原因 -->
            <h4 v-show="isshow">请选择具体原因</h4>
            <div class="complaint-list" v-show="isshow">
              <!-- 涉黄信息的原因 -->
              <ul v-show="num === 0">
                <li><span>色情导流</span></li>
                <li><span>低俗信息</span></li>
                <li><span>招嫖信息</span></li>
                <li><span>色情图文</span></li>
                <li><span>色情视频</span></li>
              </ul>
              <!-- 有害信息的原因 -->
              <ul v-show="num === 1">
                <li><span>邪教</span></li>
                <li><span>侮辱英烈</span></li>
                <li><span>恐怖血腥</span></li>
                <li><span>历史虚无主义</span></li>
                <li><span>宗教民族问题</span></li>
                <li><span>虐杀动物</span></li>
                <li><span>其他有害信息</span></li>
              </ul>
              <!-- 网络暴力的原因 -->
              <ul v-show="num === 2">
                <li><span>网暴我</span></li>
                <li><span>网暴他人</span></li>
              </ul>
              <!-- 人身攻击的原因 -->
              <ul v-show="num === 3">
                <li><span>不友善言论</span></li>
                <li><span>侮辱谩骂</span></li>
                <li><span>宣扬仇恨与歧视</span></li>
                <li><span>其他攻击行为</span></li>
              </ul>
              <!-- 违法信息的原因 -->
              <ul v-show="num === 4">
                <li><span>涉枪爆刀</span></li>
                <li><span>毒品</span></li>
                <li><span>赌博</span></li>
                <li><span>假证假票</span></li>
                <li><span>售卖个人信息</span></li>
                <li><span>其他违禁品</span></li>
                <li><span>诈骗</span></li>
              </ul>
              <!-- 不实信息的原因 -->
              <ul v-show="num === 5">
                <li><span>冒充新闻当事方</span></li>
                <li><span>造谣传谣</span></li>
                <li><span>其他不实信息</span></li>
              </ul>
              <!-- 违规营销的原因 -->
              <ul v-show="num === 6">
                <li><span>标题党、带节奏</span></li>
                <li><span>垃圾信息</span></li>
                <li><span>违规有奖活动</span></li>
                <li><span>其他营销信息</span></li>
              </ul>
              <!-- 侵权个人权益的原因 -->
              <ul v-show="num === 7">
                <li><span>内容抄袭</span></li>
                <li><span>其他侵权行为</span></li>
              </ul>
              <!-- 不良价值导向的原因 -->
              <ul v-show="num === 8">
                <li><span>不良价值导向</span></li>
              </ul>
            </div>
            <!-- 原因提示 -->
            <div class="prompt">
              <!-- 网暴我的提示 -->
              <p class="prompt-text">
                我是当事人，添加相关证据，准确定位违规信息
              </p>
              <!-- 网暴他人的提示 -->
              <p class="prompt-text">添加相关证据，准确定位违规信息</p>
              <!-- 不实信息的提示 -->
              <p class="prompt-text">造成一定社会影响和关注的社会性虚假信息</p>
            </div>
          <h4 v-show="isshow">需要补充投诉说明（140字以内）：</h4>
          <div class="complaint-textarea" v-show="isshow">
            <textarea placeholder="请详细填写，以确保投诉能够被受理"></textarea>
          </div>
        </div>
        <div class="btn-box">
          <!-- 拉黑 -->
          <div class="shield-box">
            <label class="lab"
              ><input type="checkbox" />&nbsp;&nbsp;拉黑 @肥苏</label
            >
          </div>
          <!-- 阅读条例 -->
          <div class="regulations-box">
            <label class="lab"
              ><input type="checkbox" />我已阅读<span class="rule"
                >《微博投诉操作细则》</span
              >，确认此内容属于网络暴力</label
            >
          </div>
          <button class="submit-box">
            <span class="sub-btn">提交</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      complainList: [
        { id: 1, name: '涉黄信息' },
        { id: 2, name: '有害信息' },
        { id: 3, name: '网络暴力' },
        { id: 4, name: '人身攻击' },
        { id: 5, name: '违法信息' },
        { id: 6, name: '不实信息' },
        { id: 7, name: '违规营销' },
        { id: 8, name: '侵犯个人权益' },
        { id: 9, name: '不良价值导向' }
      ],
      num: 0,
      isshow: true
    }
  },

  mounted () {
    this.closeHeader()
  },
  methods: {

    ...mapMutations(['isLogin']),
    showcheck (index) {
      this.num = index
    },
    closeHeader () {
      this.isLogin(false)
    }
  }
}
</script>

<style  lang="scss" scoped>
.main {
  width: 100%;
  .complaint-box {
    width: 510px;
    min-height: 200px;
    margin: 30px auto ;
    background: #fff;
    border-radius: 2px;
    border: 1px solid rgba(208, 208, 208, 1);
    .complaint-content {
      margin: 20px 20px 12px;
      .complaint-text {
        font-size: 14px;
        font-weight: normal;
        line-height: 18px;
        .text-content {
          font-size: 10px;
          color: #f60;
          margin: 10px 0;
        }
      }
      .user-name {
        color: #f60;
        cursor: pointer;
      }
      .complaint-user {
        background: rgba(244, 245, 246, 1);
        height: 58px;
        margin-top: 10px;
        overflow: hidden;
        display: flex;
        .user-box {
          margin: 0 14px;
          display: flex;
          align-items: center;
          .user-data-avatar {
            width: 30px;
            height: 30px;
            margin-right: 8px;
            img {
              display: block;
              width: 100%;
              object-fit: cover;
            }
          }
          .article-text {
            width: 100%;
            font-size: 12px;
            line-height: 16px;
            text-align: justify;
          }
        }
      }
      .complaint-list {
        ul {
          display: flex;
          flex-wrap: wrap;
          margin-left: -10px;
          list-style: none;
          width: 100%;
        }
        li {
          width: 23%;
          height: 36px;
          line-height: 36px;
          margin-left: 7px;
          margin-bottom: 10px;
          text-align: center;
          cursor: pointer;
        }
        span {
          display: block;
          width: 100%;
          height: 36px;
          font-size: 12px;
          line-height: 36px;
          color: #333;
          background: rgba(242, 242, 245, 1);
          border-radius: 4px;
        }
      }
      .prompt {
        border-bottom: 1px solid #f1f1f1;
        .prompt-text {
          font-size: 12px;
          color: #808080;
          line-height: 16px;
          padding-bottom: 10px;
        }
      }
      h4 {
        margin: 22px 0;
        font-weight: 800;
      }
      textarea {
        display: inline;
        height: 80px;
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0px 0px 4px 0px rgb(0 0 0 / 30%);
        border: 1px solid rgba(204, 204, 204, 1);
        padding: 8px;
        width: 97%;
        color: #333;
        line-height: 16px;
        outline: none;
        resize: none; /*防止拖拽文本域*/
      }
    }
    .btn-box {
      padding: 12px 20px 10px;
      border-top: 1px solid #f1f1f1;
      .shield-box {
        margin-bottom: 12px;
      }
      .lab {
        font-size: 12px;
        line-height: 16px;
      }
      .regulations-box {
        margin-bottom: 12px;
        .rule {
          color: #f60;
        }
      }
      .submit-box {
        margin-bottom: 12px;
        border: none;
        background: none;
        .sub-btn {
          background: #ffc09f;
          color: #fff;
          border: 1px solid #fbbd9e;
          box-shadow: none;
          cursor: pointer;
          border-radius: 2px;
          font-size: 14px;
          width: 90px;
          height: 34px;
          line-height: 34px;
          display: block;
          text-align: center;
        }
      }
    }
  }
}
</style>
